<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>17_动画-复合写法</title>
        <style>
            @keyframes move {
                0% {

                }

                100% {
                    transform: translateX(1100px);
                }
            }


            .outer {
                width: 1200px;
                height: 100px;
                border: 1px solid black;
            }

            .inner {
                width: 100px;
                height: 100px;
                background-color: green;


                /* animation-name
                animation-duration
                animation-delay:
                animation-direction
                animation-iteration-count
                animation-fill-mode
                animation-play-state
                animation-timing-function: steps(5);
                */

                /* animation-timing-function: steps(5);
                animation-name: move;
                animation-duration: 5s; */

                /* 复合写法 如果只写一个时间 那么代表duration 如果是2个 
                  那么第一个代表是duration 第二个是delay
                  其余的是无所谓
                */
                animation: move 5s 2s reverse infinite forwards steps(5);

            }

        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">

            </div>
        </div>
    </body>
</html>